<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:http="http://www.w3.org/1999/xhtml"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>写文章 | 程序猿张先森</title>

    <link rel="icon" type="image/x-icon" href="https://zhy-myblog.oss-cn-shenzhen.aliyuncs.com/static/img/favicon.ico">
    <link href="https://lib.baomitu.com/amazeui/2.7.2/css/amazeui.min.css" rel="stylesheet">
    <link rel="stylesheet" href="css/editormd/editormd.min.css"/>
    <link rel="stylesheet" href="css/all.css">
    <link rel="stylesheet" href="css/editormd/editor.css">
    <link href="https://lib.baomitu.com/font-awesome/5.8.0/css/fontawesome.min.css" rel="stylesheet">
    <style>
        /*隐藏markdown全窗口预览不会关闭的bug，会导致其他fa选择器同时隐藏*/
        .fa{
            display: none;
        }
    </style>
    <script src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="js/editormd/editormd.js"></script>
    <script src="https://lib.baomitu.com/amazeui/2.7.2/js/amazeui.min.js"></script>
</head>
<body>
<div id="app">
    <div id="removeDiv">

        <div class="header">
            <div class="am-topbar" style="margin-bottom: 0">
                <h1 class="am-topbar-brand">
                    <a href="/" class="blogTitleName"><img src="https://zhy-myblog.oss-cn-shenzhen.aliyuncs.com/static/img/zhy.png" class="imgStyle">程序猿张先森</a>
                </h1>

                <div class="am-collapse am-topbar-collapse" id="doc-topbar-collapse" style="text-align: center">

                    <div class="editor-title"><i class="editor-welcome">Welcome to</i><i class="editor-title-name">张先森</i><i class="editor-title-words">的创作中心</i></div>

                    <div class="am-topbar-right" th:if="${#httpServletRequest.remoteUser}">
                        <div class="am-dropdown" data-am-dropdown="{boundary: '.am-topbar'}">
                            <span class="personalSpace am-btn am-btn-secondary am-topbar-btn am-btn-sm am-dropdown-toggle" data-am-dropdown-toggle><span sec:authentication="name"></span> <span class="am-icon-caret-down"></span></span>
                            <ul class="am-dropdown-content">
                                <li><a href="/user" sec:authorize="hasRole('ROLE_USER')">个人主页</a></li>
                                <li><a href="/superadmin" sec:authorize="hasRole('ROLE_SUPERADMIN')">网站后台管理</a></li>
                                <li><a href="/user" class="news">消息<span class="newsNum am-badge am-badge-danger"></span></a></li>
                                <hr style="margin: 0">
                                <li><a th:href="@{/logout}">退出登录</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="am-topbar-right" th:unless="${#httpServletRequest.remoteUser}">
                        <a href="/register" class="am-btn am-btn-primary am-topbar-btn am-btn-sm" style="color: white">注册</a>
                    </div>
                    <div class="am-topbar-right" th:unless="${#httpServletRequest.remoteUser}">
                        <a href="/login" class="loginBtn am-btn am-btn-primary am-topbar-btn am-btn-sm" style="color: white">登录</a>
                    </div>
                    <div class="am-topbar-right writing am-hide-md-down">
                        <a  href="/editor" target="_blank" style="text-decoration: none">
                            <img class="am-circle" src="https://zhy-myblog.oss-cn-shenzhen.aliyuncs.com/static/img/writing.png">
                            <span class="write-word">写博客</span>
                        </a>
                    </div>

                </div>
            </div>
        </div>
        <div id="writeArticle">
            <div class="zhy-editor">
                <div class="zhy-editor-input">
                    <input id="zhy-editor-title" type="text" placeholder="输入文章标题">
                    <button type="button" class="publishBtn am-btn am-btn-danger">发布博客</button>
                </div>
            </div>
            <div class="zhy-editor-writing">
                <!--MarkDown的id标志 -->
                <div id="my-editormd">
                    <!-- 书写与实时显示的textarea -->
                    <textarea id="my-editormd-markdown-doc" name="my-editormd-markdown-doc" style="display:none;"></textarea>
                    <!-- 用于后端获取md稳当内容，Java中：request.getParameter("my-editormd-html-code")。 -->
                    <textarea id="my-editormd-html-code" name="my-editormd-html-code" style="display:none;"></textarea>
                </div>
            </div>

            <div class="notice-box notice-box-title">
                <i class="am-icon-exclamation-circle"></i>
                <span> 文章标题不能为空</span>
            </div>
            <div class="notice-box notice-box-content">
                <i class="am-icon-exclamation-circle"></i>
                <span> 文章內容不能为空</span>
            </div>
        </div>
    </div>

    <!-- 模态框（Modal） -->
    <div class="am-modal am-modal-alert" tabindex="-1" id="my-alert">
        <div class="am-modal-dialog" style="border-radius: 5px;">
            <div class="am-modal-hd" style="text-align: left;margin:auto auto 5px 20px">发布博客
                <a href="javascript: void(0)" class="am-close am-close-alt am-close-spin" data-am-modal-close style="margin: 7px 10px auto auto">&times;</a>
            </div>
            <div class="am-modal-bd">
                <div class="article-setting">
                    <div class="article-tag row">
                        <div class="tags">
                            <div class="tag-inline">
                                <label class="publish-tag">文章标签<strong>:</strong></label>
                                <div class="tag">

                                </div>
                                <button class="addTagsBtn">
                                    <i class="am-icon-plus-circle"></i>
                                    添加标签
                                </button>
                            </div>
                            <span style="display: block;margin-left:67px;">最多添加5个标签</span>
                        </div>
                    </div>
                    <div class="article-type row">
                        <label class="publish-tag">文章类型<strong>:</strong></label>
                        <div class="type">
                            <select id="select-type">
                                <option value="choose" selected>请选择</option>
                                <option value="原创">原创</option>
                                <option value="转载">转载</option>
                            </select>
                            <span class="required">*</span>
                        </div>

                        <label class="publish-tag" style="margin-left: 10px">博客分类<strong>:</strong></label>
                        <div class="categories">
                            <select id="select-categories">
                                <option value="choose">请选择</option>
                            </select>
                            <span class="required">*</span>
                        </div>
                    </div>
                    <div class="article-tag row">
                        <label class="publish-tag">文章等级<strong>:</strong></label>
                        <div class="grade">
                            <select id="select-grade">
                                <option value="choose" selected>请选择</option>
                                <option value="12">☆</option>
                                <option value="15">☆☆</option>
                                <option value="17">☆☆☆</option>
                                <option value="18">☆☆☆☆</option>
                                <option value="20">☆☆☆☆☆</option>
                            </select>
                            <span class="required">*</span>
                        </div>

                        <div id="originalAuthorHide" style="display: inline-block">
                            <label class="publish-tag" style="margin-left: 10px;display: inline-block">文章作者<strong>:</strong></label>
                            <div class="originalAuthor" style="display: inline-block">
                                <input type="text" id="originalAuthor" placeholder="请输入文章原作者">
                                <span class="required">*</span>
                            </div>
                        </div>
                    </div>
                    <div class="articleUrlHide row">
                        <label class="publish-tag" style="display: inline-block">原文链接<strong>:</strong></label>
                        <div class="url" style="display: inline-block">
                            <input type="text" id="articleUrl" placeholder=" 请输入原文链接">
                            <span class="required">*</span>
                        </div>
                    </div>
                </div>
            </div>
            <div class="am-modal-footer" style="text-align: right;height: 45px">
                <button type="button" class="am-btn am-btn-default am-round" data-am-modal-close style="margin-right: 10px">取消</button>
                <button type="button" class="surePublishBtn am-btn am-btn-danger am-round" style="margin: 10px 15px 10px auto">
                    发表博客
                </button>
            </div>
        </div>
        <div class="notice-box notice-box-tags">
            <i class="am-icon-exclamation-circle"></i>
            <span> 文章标签不能为空</span>
        </div>
        <div class="notice-box notice-box-type">
            <i class="am-icon-exclamation-circle"></i>
            <span> 文章类型不能为空</span>
        </div>
        <div class="notice-box notice-box-categories">
            <i class="am-icon-exclamation-circle"></i>
            <span> 博客分类不能为空</span>
        </div>
        <div class="notice-box notice-box-grade">
            <i class="am-icon-exclamation-circle"></i>
            <span> 文章等级不能为空</span>
        </div>
        <div class="notice-box notice-box-originalAuthor">
            <i class="am-icon-exclamation-circle"></i>
            <span> 原作者不能为空</span>
        </div>
        <div class="notice-box notice-box-url">
            <i class="am-icon-exclamation-circle"></i>
            <span> 原文链接不能为空</span>
        </div>

    </div>

</div>

<script src="js/all.js"></script>
<script src="js/editormd/editor.js"></script>
</body>
</html>